<template>
    <el-container class="richtext-select panel-block">
      <el-main>
        <div class="usersList" v-if="table.data?.length">
            <div class="usersList-title sa-flex">
              <div class="userinfo">用户</div>
              <div class="time">到期时间</div>
              <div class="income">收益</div>
            </div>
            <div class="usersList-content sa-flex" v-for="(item, index) in table.data" :key="index">
              <div class="userinfo">
                <sa-user-profile :user="item" :id="item.id"/>
              </div>
              <div class="time">
                {{formatTime(item?.expiration_time)||'请选择'}}
              </div>
              <div class="income">{{item?.devIncome? `${item.devIncome}%`:'-'  }}</div>
            </div>
        </div>
      </el-main>
    </el-container>
  </template>
  
  <script setup>
  import {onMounted, reactive, ref} from 'vue';
  import {cloneDeep} from "lodash";
  import MemberList from './memberList.vue';
 
  const props = defineProps(['modal']);
  const emit = defineEmits(['modalCallBack']);
 


  // 列表
  const table = reactive({
    data: [],
  });

  const loading = ref(true);
  // 获取
  async function getData() {
    loading.value = true;
    const {error, data} = await api.newApi.storeList({
     
    })
    if (error == 0) {
      table.data = data.data;
    }
    loading.value = false;
  }

  function look(data){
    useModal(MemberList, 
        {
          title: '查看团员列表',
          id,
        },
        {
          confirm: (res) => {
            getData();
          },
        },
      );
  }

  function modalCallBack(e) {
    emit('modalCallBack', {event: 'confirm', data: cloneDeep(e)});
  }
  
  onMounted(() => {
    getData();
  });
  </script>
  <style lang="scss" scoped>
  .usersList {
  width: 100%;
  min-width: 500px;
  border-top: 1px solid #797979;
  border-left: 1px solid #797979;

  .userinfo {
    flex: 4;
    overflow: hidden;

  }

  .time {
    flex: 4;
    padding: 0 10px;
  }

  .income {
    flex: 3;
  }

  &>div>div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #797979;
    border-bottom: 1px solid #797979;
  }

  .usersList-title {
    background-color: #DEDEDE;
    height: 35px;
  }

  .usersList-content {
    height: 45px;
  }
}
  </style>
  